<template>
  <el-footer class="footer">
    <div class="footer-content">
      <p>Privacy Policy | <a href="/terms-of-service">Terms of Service</a></p>
    </div>
  </el-footer>
</template>

<style scoped>
.footer {
    background-color: #2e2b2b; /* 与导航栏一样设置为深色背景，形成上下呼应 */
    color: #fff; /* 文字颜色设置为白色，与背景对比明显 */
    padding: 20px 0; /* 增加上下内边距，使内容在垂直方向上有一定间距 */
    width: 100%; /* 确保页脚宽度占满整个页面 */
    text-align: center; /* 让页脚内容居中显示 */
    clear: both; /* 清除浮动，避免对其他元素布局造成影响 */
    margin-top: 30px; /* 适当增加与上方内容的间距 */
}

.footer-content {
    max-width: 1200px; /* 限制内容宽度，与导航栏等其他部分保持一致 */
    margin: 0 auto; /* 水平居中内容 */
}

.social-links a {
    margin-right: 15px; /* 增加社交媒体图标之间的间距 */
    color: #fff; /* 图标颜色设置为白色，与背景搭配协调 */
    font-size: 24px; /* 适当增大图标大小，使其更醒目 */
    transition: color 0.3s ease; /* 添加过渡效果，使鼠标悬停时颜色变化更平滑 */
}

.social-links a:hover {
    color: #ccc; /* 鼠标悬停时图标颜色变为浅灰色 */
}
</style>